<!--
* @description 套装详情
* @fileName tzDetail.vue
* @author huangyu
* @date 2022/06/10 16:09:55
!-->
<template>
    <div style="line-height:28px;margin-top:-20px;">
        <!-- {{model}} -->
        <h3 class="color_wy">{{ model.name }}</h3>
        <div>
            <!-- 额外属性 -->
            <el-row v-if="suit2.tList && suit2.tList.length > 0" style="height:100px;">
                <el-col :span="24" style="font-size:15px;line-height:32px;" class="color_success">2件效果</el-col>
                <el-col :span="12" v-for="(item, index) in suit2.tList" :key="index">
                    {{ item }}：<span class="color_success">{{ suit2.list[index]}}</span>
                </el-col>
            </el-row>
            <el-row v-if="suit3.tList && suit3.tList.length > 0" style="height:100px;">
                <el-col :span="24" style="font-size:15px;line-height:32px;" class="color_success">3件效果</el-col>
                <el-col :span="12" v-for="(item, index) in suit3.tList" :key="index">
                    {{ item }}：<span class="color_success">{{ suit3.list[index]}}</span>
                </el-col>
            </el-row>
            <el-row v-if="suit4.tList && suit4.tList.length > 0" style="height:100px;">
                <el-col :span="24" style="font-size:15px;line-height:32px;" class="color_success">4件效果</el-col>
                <el-col :span="12" v-for="(item, index) in suit4.tList" :key="index">
                    {{ item }}：<span class="color_success">{{ suit4.list[index]}}</span>
                </el-col>
            </el-row>
            <el-row v-if="suit5.tList && suit5.tList.length > 0" style="height:100px;">
                <el-col :span="24" style="font-size:15px;line-height:32px;" class="color_success">5件效果</el-col>
                <el-col :span="12" v-for="(item, index) in suit5.tList" :key="index">
                    {{ item }}：<span class="color_success">{{ suit5.list[index]}}</span>
                </el-col>
            </el-row>
            <el-row v-if="suitAll.tList && suitAll.tList.length > 0" style="height:100px;">
                <el-col :span="24" style="font-size:15px;line-height:32px;" class="color_success">全套效果</el-col>
                <el-col :span="12" v-for="(item, index) in suitAll.tList" :key="index">
                    {{ item }}：<span class="color_success">{{ suitAll.list[index]}}</span>
                </el-col>
            </el-row>

            <el-row v-if="model.list && model.list.length > 0" style="height:100px;">
                <el-col :span="24" style="font-size:15px;line-height:32px;" class="color_success">套装</el-col>
                <el-col :span="12" v-for="(item, index) in model.list" :key="index">
                    {{item}}
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import ZBInfo from "@/components/game/aion/data.js"
import { tzItemArr, tzItemArrT } from "@/components/game/aion/data.js"
export default {
    props:{
        model: {},
    },
    components: {},
    data() {
        return {
            ZBInfoS: ZBInfo,
            suit2: {},
            suit3: {},
            suit4: {},
            suit5: {},
            suitAll: {},
        }
    },
    mounted() {

    },
    methods: {
        zbInfoData() {
            this.suit2 = this.ZBInfoS.zbInfoFunction(this.model.suit2, tzItemArr, tzItemArrT)
            this.suit3 = this.ZBInfoS.zbInfoFunction(this.model.suit3, tzItemArr, tzItemArrT)
            this.suit4 = this.ZBInfoS.zbInfoFunction(this.model.suit4, tzItemArr, tzItemArrT)
            this.suit5 = this.ZBInfoS.zbInfoFunction(this.model.suit5, tzItemArr, tzItemArrT)
            this.suitAll = this.ZBInfoS.zbInfoFunction(this.model.suitAll, tzItemArr, tzItemArrT)
        },
    },
    watch: {
        model: {
            handler: 'zbInfoData',
            immediate: true,
        },
    }
}
</script>

<style scoped>
</style>